export const template = `
<ph-form>
    <ph-validator :validators="{odd,range}">
        <ph-divider type="primary">内置验证器</ph-divider>
        <ph-form-input label="required" :validators="['required']"/>
        <ph-form-input label="number" :validators="['number']"/>
        <ph-form-input label="email" :validators="['email']"/>
        <ph-form-input label="color" :validators="['color']"/>
        <ph-form-input label="url" :validators="['url']"/>
        <ph-form-input label="mobile" :validators="['mobile']"/>
        <ph-form-input label="length" :validators="['length|5']"/>
        <ph-form-input label="chinese" :validators="['chinese']"/>
        <ph-form-input label="regexp" :validators="['regexp|^[a-z]+$']"/>

        <ph-divider type="primary">自定义奇数验证器odd</ph-divider>
        <ph-form-input label="odd" :validators="['odd']"/>
        <ph-divider type="primary">自定义数字范围带参数验证器range|5-10</ph-divider>
        <ph-form-input label="range" :validators="['range|5-10']"/>

        <ph-button-group :container="true" justify="center">
            <ph-form-submit type="primary" :radius="true">提交</ph-form-submit>
        </ph-button-group>
    </ph-validator>
</ph-form>
`;
export const script = `
import { defineComponent } from 'vue'
import {
    PhDivider,
    PhForm,
    PhValidator,
    PhFormInput,
    PhFormSubmit,
    PhButtonGroup
} from 'phoeon'

export default defineComponent({
    components:{
        PhDivider,
        PhForm,
        PhValidator,
        PhFormInput,
        PhFormSubmit,
        PhButtonGroup
    },
    setup(){
        //eg 自定义奇数验证
        const odd = function odd(v:unknown,args:string[],next:()=>void,reject:(d?:any)=>void){
            if((v as number)%2)next()
            else reject({
                valid:false,
                tip:"该数字不是奇数"
            })
        }
        //eg 自定义数字范围验证 <ph-form-input :validators="['range|5,10']">
        const range = function number(v:unknown,args:string[],next:()=>void,reject:(d?:any)=>void){
            //args:['5','10']
            const start = Number(args[0])
            const end = Number(args[1])
            const flag = Number(v)>=start&&Number(v)<=end
            if(flag)next()
            else reject({
                valid:false,
                tip:\`非法数字,请输入\${start}-\${end}之间的数字\`
            })
        }
        return {
            odd,
            range,
        }
    }
})
`;
export const baseUsage = `
import PhValidator from 'phoeon'
type ValidatorTask = (
    v:unknown,
    args?:Array<string>,
    next:()=>void,reject:(d?:any)=>void
    )=>void
interface Validator{
    //自定义验证起
    validators:{
        [k:string]:ValidatorTask
    }
}
`;
